<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header style="height:auto;">
        <div style="margin-top: 15px;">
          <el-row>
            <el-input v-model="kwInput" placeholder="输入关键词进行搜索" clearable class="" @keyup.native.enter="handleSearch">
              <el-select
                slot="prepend"
                v-model="select_web"
                style="width: 330px;"
                filterable
                clearable
                placeholder="选择网站"
                @change="handleSearch"
              >
                <el-option label="所有" value="-1" />
                <el-option
                  v-for="(item,index) in dataWebs"
                  :key="index"
                  :label="item.domain"
                  :value="item.id"
                />
              </el-select>
              <el-button slot="append" style="width: 180px" type="success" icon="el-icon-search" @click="handleSearch">
                搜索
              </el-button>
            </el-input>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="6" :md="6" :lg="4" :xl="4">
              <el-input
                v-model="tagInput"
                clearable
                style="margin-top: 10px;"
                width="200"
                placeholder="输入tag搜索"
                @keyup.native.enter="handleSearch"
              />

            </el-col>
            <el-col :xs="24" :sm="6" :md="6" :lg="4" :xl="4">
              <el-select v-model="stype" style="margin-top: 10px;" filterable clearable placeholder="选择状态">
                <el-option
                  v-for="(item,index) in stypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="5">
              <el-select v-model="target_web" style="margin-top: 10px" filterable clearable placeholder="过滤目标网站">
                <el-option
                  v-for="(item,index) in targetWebs"
                  :key="index"
                  :label="item.domain+'|'+ item.tag"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="5">
              <el-select v-model="project_id" style="margin-top: 10px" placeholder="选择项目" filterable clearable>
                <el-option label="所有" value="" />
                <el-option
                  v-for="(item,index) in projects"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
              <el-button
                style="float:right; display: inline;margin-top: 10px;"
                type="success"
                @click="handleShowDialog"
              >添加新关键词
              </el-button>
              <el-button
                style="float:right; display: inline;margin-top: 10px;margin-right: 10px;"
                type="primary"
                @click="directlyUploadTaskVisible=true"
              ><i class="el-icon-tickets" /></el-button>
              <el-button
                style="float:right; display: inline;margin-top: 10px;margin-right: 10px;"
                type="warning"
                @click="cralwtaskVisible=true"
              ><i class="el-icon-sort" /></el-button>

              <el-button
                style="float:right; display: inline;margin-top: 10px;margin-right: 10px;"
                type="text"
                @click="merchantVisible=true"
              >GMC
              </el-button>
              <el-button
                style="float:right; display: inline;margin-top: 10px;margin-right: 10px;"
                type="text"
                @click="uploadforbiddenkeywordVisuable=true"
              >违禁词
              </el-button>
            </el-col>

          </el-row>
        </div>
      </el-header>
      <el-main>
        <el-table
          v-loading="listLoading"
          :data="data"
          border
          :default-sort="{prop: 'create_at', order: 'descending'}"
          style="width: 100%"
          @sort-change="handleSort"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            prop="web__domain"
            label="域名"
          />
          <el-table-column
            fixed
            sortable="custom"
            prop="keyword"
            label="关键词"
          >
            <template slot-scope="scope">
              <a
                :href="'https://www.aliexpress.com/wholesale?SortType=total_tranpro_desc&SearchText='+scope.row.keyword"
                target="_blank"
              >{{ scope.row.keyword }}</a>
              <br>
              <div v-if="scope.row.tag.length > 0">
                {{ scope.row.tag }}|{{ scope.row.update_at }}
              </div>
              <el-tag v-if="scope.row.mini_price > 0" size="mini" type="info">最低价:{{ scope.row.mini_price }}</el-tag>
              <el-tag v-if="scope.row.max_price > 0" size="mini" type="info">最高价:{{ scope.row.max_price }}</el-tag>
              <el-tag v-if="scope.row.sort_type!=''" size="mini" type="info">排序方式:{{ scope.row.sort_type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable="custom"
            label="目标网站"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.target_webs.length > 0"
                style="display: block"
                class="pointer"
                @click="handleModify(scope.row)"
              >{{
                scope.row.target_webs[0].domain + '(等' + scope.row.target_webs.length + '个网站)'
              }}</span>
              <span
                v-else
                style="display: block"
                class="pointer"
                @click="handleModify(scope.row)"
              >{{
                scope.row.target_web__domain + '|' + scope.row.target_web__tag
              }}</span>
              <el-button v-else type="text" @click="handleModify(scope.row)">修改</el-button>
              <el-tag v-if="scope.row.is_auto_upload" size="mini" type="success">自动上传</el-tag>
              <el-button
                v-if="scope.row.target_webs.length > 0"
                size="mini"
                type="text"
                @click="handleDeletePsProduct(scope.row)"
              >删除上传产品
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="产品数量"
            sortable="custom"
            prop="product_count"
            width="180"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleProducts(scope.row)">
                {{ scope.row.crawled_count }}/{{ scope.row.product_count }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="is_finished"
            sortable="custom"
            width="80"
            label="结束"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_finished"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="ChangeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="is_upload"
            sortable="custom"
            width="80"
            label="已传"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_upload"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="ChangeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="350"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="handleUpload(scope.row)"
              >已爬产品
              </el-button>
              <el-button
                size="mini"
                type="warning"
                @click="handleUploadTask(scope.row)"
              >上传
              </el-button>
              <el-button
                v-if="scope.row.send_count>0"
                size="mini"
                type="danger"
                @click="handleCrawlKeywordPage(scope.row)"
              >重新爬取
              </el-button>
              <el-button
                v-else
                size="mini"
                type="success"
                @click="handleCrawlKeywordPage(scope.row)"
              >开始爬取
              </el-button>

              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="data.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />

      </el-main>
    </el-container>

    <el-dialog
      append-to-body
      title="添加新的爬虫关键词"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="temp" label-position="left" label-width="160px">
        <el-tabs v-model="newactiveName">
          <el-tab-pane label="关键词配置" name="1">
            <el-form-item label="关键词">
              <el-input
                v-model="temp.keyword"
                type="textarea"
                :autosize="{ minRows: 2}"
                placeholder="输入关键词,每行一个"
              />
            </el-form-item>
            <el-form-item label="项目" label-width="160px">
              <el-select v-model="temp.project_id" placeholder="选择项目">
                <el-option
                  v-for="item in projects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="最低价格">
              <el-input v-model="temp.mini_price" type="number" />
            </el-form-item>
            <el-form-item label="最高价格">
              <el-input v-model="temp.max_price" type="number" />
            </el-form-item>
            <el-form-item label="排序规则">
              <el-select v-model="temp.sort_type" tyle="width: 100%" filterable clearable placeholder="选择排序规则">
                <el-option v-for="item in sortTypes" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="爬取参数">
              <el-input v-model="temp.max_pages" size="mini" placeholder="最多页面">
                <template slot="prepend">最多页面数</template>
              </el-input>
              <el-input v-model="temp.min_orders" size="mini" placeholder="最少订单">
                <template slot="prepend">最少订单数</template>
              </el-input>
              <el-input v-model="temp.min_reviews" size="mini" placeholder="最少reviews">
                <template slot="prepend">最少评论数</template>
              </el-input>
              <el-input v-model="temp.min_star" size="mini" placeholder="最少评分">
                <template slot="prepend">最小得分数</template>
              </el-input>
              <el-input v-model="temp.max_delivery_days" size="mini" placeholder="最长妥投天数" type="number">
                <template slot="prepend">最长妥投天</template>
              </el-input>
              <el-input v-model="temp.max_commit_days" size="mini" placeholder="最长保护期" type="number">
                <template slot="prepend">最长保护期</template>
              </el-input>
              <el-switch
                v-model="temp.crawl_shipping_price"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="爬取邮费"
                inactive-text="不爬邮费"
              />
              <el-input
                v-if="temp.crawl_shipping_price"
                v-model="temp.ship_from"
                size="mini"
                placeholder="输入国家代码:US/UK/CN"
              >
                <template slot="prepend">发货国家</template>
              </el-input>

            </el-form-item>
            <el-form-item label="Tag">
              <el-input v-model="temp.tag" />
            </el-form-item>
            <el-form-item label="来源网站">
              <el-select v-model="temp.web_id" tyle="width: 100%" filterable clearable placeholder="来源网站">
                <el-option v-for="item in this.dataWebs" :key="item.id" :label="item.domain" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="自动更新频率">
              <el-input v-model="temp.update_frequency" type="number">
                <template slot="append">分钟</template>
              </el-input>

            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="上传目标网站" name="2">
            <div style="border-color: red;border-style: solid;border-width: 2px;">
              <el-form-item label="目标网站">
                <el-select
                  v-model="temp.target_web_id"
                  style="width: 100%"
                  filterable
                  clearable
                  placeholder="目标网站"
                  @change="handleChangeTagetweb"
                >
                  <el-option
                    v-for="item in this.targetWebs"
                    :key="item.id"
                    :label="item.domain+' '+item.tag+''"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="自动上传">
                <el-switch
                  v-model="temp.is_auto_upload"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </el-form-item>

              <el-form-item label="配置目录">
                <el-button
                  v-if="temp.target_web_id"
                  size="mini"
                  :type="direct_upload_state"
                  @click.native.stop="direct_upload_dialogVisible = true"
                >设置
                </el-button>
                <el-alert
                  v-else
                  title="请选择目标网站"
                  type="error"
                  :closable="false"
                />
                <el-tag type="success">默认目录:{{ temp.id_of_default_category }}</el-tag>
                <el-tag type="danger">关联目录:{{ temp.id_of_associated_categories }}</el-tag>
              </el-form-item>
            </div>
            <div style="display: block">
              <el-table
                :data="temp.target_webs"
                border
                style="width: 100%"
              >
                <el-table-column
                  fixed
                  prop="domain"
                  label="网站"
                  width="150"
                />
                <el-table-column
                  fixed
                  prop="target_web_id"
                  label="网站ID"
                  width="150"
                />
                <el-table-column
                  fixed
                  prop="id_of_default_category"
                  label="默认目录"
                  width="150"
                />
                <el-table-column
                  fixed
                  prop="id_of_associated_categories"
                  label="关联目录"
                  width="150"
                >
                  <template slot-scope="scope">
                    <el-tag v-for="(item,index) in scope.row.id_of_associated_categories" :key="index" type="danger">
                      {{ item }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleRemoveTargetWeb(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="modifyloading" @click="handleAddNew">提 交</el-button>
      </span>
    </el-dialog>
    <keywordcralwtask
      :task-visible="taskVisible"
      :keyword_id="keyword_id"
      :keyword="keyword"
      @closeCrawlTaskDialog="taskVisible=false"
    />
    <uploadbykeyword
      :upload-visible="uploadVisible"
      :keyword="keyword"
      :keyword_target_web_id="keyword_target_web_id"
      :keyword_id="keyword_id"
      :source_web_id="select_web"
      @closeUploadByKeywordDialog="uploadVisible=false"
      @uploadsuccess="handleUploadSuccess"
    />
    <directlyuploadtask
      :task-visible="directlyUploadTaskVisible"
      :domain="domain"
      @closeCrawlTaskDialog="directlyUploadTaskVisible=false"
    />
    <crawltask :task-visible="cralwtaskVisible" @closeCrawlTaskDialog="cralwtaskVisible=false" />

    <choosecategory
      :website_id="temp.target_web_id"
      :choosedialog-visible="direct_upload_dialogVisible"
      :default_catalog="temp.id_of_default_category"
      :default-checked-keys="temp.id_of_associated_categories"
      @SetChoose="handleSetDirectUploadCategories"
      @closeDialog="direct_upload_dialogVisible=false"
    />
    <merchant :merchant-visible="merchantVisible" @closeMerchantDialog="merchantVisible=false" />
    <forbiddenkeyword
      :is-visible="uploadforbiddenkeywordVisuable"
      @closeMyDialog="uploadforbiddenkeywordVisuable=false"
    />
  </div>
</template>

<script>
import { Get, Post, Put, Delete } from '@/api/erp/crawl/searchkey'
import { GetWebs, crawl_keyword_page } from '@/api/erp/crawlproduct'
import { Get as GetTargetWebsite } from '@/api/erp/elicink/website'
import { DeletePsProductByCrawlKeyword } from '@/api/erp/crawl/psproductsdeletetask'
import qs from 'qs'
import Keywordcralwtask from './elements/keywordcralwtask'
import uploadbykeyword from './elements/uploadbykeyword'
import Cookies from 'js-cookie'
import directlyuploadtask from '@/views/crawl/elements/directlyuploadtask'
import Choosecategory from '@/views/prestashop/element/choosecategory'
import crawltask from '@/views/crawl/elements/crawltask'
import merchant from '@/views/orders/element/merchant'
import forbiddenkeyword from '@/views/crawl/elements/forbiddenkeyword'
import { Get as GetProjects } from '@/api/erp/elicink/project'

const souceSiteKey = 'crawl_searchkey_soucekey'
const SEARCHKEY_WEB_ID = 'crawl_searchkey_web_id'

export function getToken(key) {
  const v = Cookies.get(key)
  return v && parseInt(v) || null
}

export function setToken(key, value) {
  return Cookies.set(key, value)
}

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}

export default {
  components: {
    forbiddenkeyword,
    Keywordcralwtask,
    uploadbykeyword,
    directlyuploadtask,
    Choosecategory,
    crawltask,
    merchant
  },
  data() {
    return {
      project_id: '',
      projects: [],
      newactiveName: '1',
      merchantVisible: false,
      uploadforbiddenkeywordVisuable: false,
      sortTypes: [
        {
          id: 'default',
          label: 'default'
        },
        {
          id: 'total_tranpro_desc',
          label: 'orders'
        },
        {
          id: 'create_desc',
          label: 'newest'
        },
        {
          id: 'price_asc',
          label: '价格从低到高'
        },
        {
          id: 'price_desc',
          label: '价格从高到低'
        }
      ],
      direct_upload_web_id: '',
      direct_upload_dialogVisible: false,
      direct_upload_associated_categories: [],
      direct_upload_default_category: 2,
      direct_upload_state: 'default',
      modifyloading: false,
      directlyUploadTaskVisible: false,
      uploadtaskVisible: false,
      domain: '',
      uploadVisible: false,
      taskVisible: false,
      cralwtaskVisible: false,
      keyword_id: '',
      keyword_target_web_id: '',
      keyword: '',
      data: [],
      dataWebs: [],
      targetWebs: [],
      select_web: '-1',
      target_web: '',
      listLoading: true,
      innerDialogVisible: false,
      order_by: '',
      order_desc: '',
      // pagination
      kwInput: '',
      tagInput: '',
      pagesize: 10,
      page: 1,
      total: 0,
      temp: {
        project_id: '',
        id: '',
        web_id: '',
        keyword: '',
        is_auto_upload: true,
        tag: '',
        update_frequency: 0,
        target_web_id: '',
        target_webs: [],
        sort_type: '',
        max_price: 300,
        mini_price: 0,
        min_orders: 0,
        min_reviews: 0,
        min_star: 0,
        max_pages: 100,
        id_of_default_category: '',
        id_of_associated_categories: [],
        ship_from: '',
        max_delivery_days: 0,
        max_commit_days: 0,
        crawl_shipping_price: false
      },
      stype: '',
      stypeOptions: [
        {
          label: '不过滤',
          value: ''
        },
        {
          label: '爬完还没上传',
          value: 'crawlandunupload'
        },
        {
          label: '未爬取',
          value: 'uncrawl'
        },
        {
          label: '爬取完成',
          value: 'crawled'
        },
        {
          label: '爬完已上传',
          value: 'crawlanduploaded'
        }
      ]
    }
  },

  created() {
    GetWebs(null, qs.stringify({ 'kw': 'aliexpress' })).then((response) => {
      this.dataWebs = response.data
    }).catch(error => {
      console.log(error)
    })
    GetTargetWebsite().then((response) => {
      this.targetWebs = response.data.data
    }).catch(error => {
      console.log(error)
    })
    GetProjects()
      .then(response => {
        this.projects = response.data.data
      })
    this.select_web = getToken(souceSiteKey) || null
    this.temp.web_id = getToken(SEARCHKEY_WEB_ID) || null
    this.getList()
  },
  methods: {
    handleDeletePsProduct(row) {
      this.$confirm(`确认要从网站永久删除关键词相关产品  ${row.keyword}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeletePsProductByCrawlKeyword({ 'keyword_id': row.id }).then(response => {
          this.notify(response.msg)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
      })
    },
    handleChangeTagetweb() {
      this.temp.id_of_default_category = ''
      this.temp.id_of_associated_categories = []
    },
    handleRemoveTargetWeb(row) {
      // const target_web_id = row.target_web_id
      var index = this.temp.target_webs.filter(function(value, index, arr) {
        if (value.target_web_id !== row.target_web_id) {
          return index
        }
      })
      this.temp.target_webs.splice(index, 1)
    },
    handleAddNewTargetweb() {
      if (this.temp.target_web_id === '') {
        return
      }
      const target_web_id = this.temp.target_web_id
      let domain = '--'
      this.targetWebs.forEach(function(item) {
        if (item.id === target_web_id) {
          domain = item.domain
        }
      })
      var exist = false
      this.temp.target_webs.forEach(function(item) {
        if (item.target_web_id === target_web_id) {
          alert('网站已经存在')
          exist = true
        }
      })
      if (exist) {
        return
      }
      console.log(this.temp.id_of_associated_categories)
      this.temp.target_webs.push({
        'domain': domain,
        'target_web_id': this.temp.target_web_id,
        'id_of_associated_categories': this.temp.id_of_associated_categories,
        'id_of_default_category': this.temp.id_of_default_category
      })
      this.temp.id_of_default_category = ''
      this.temp.id_of_associated_categories = []
    },
    // pageSize 改变后触发 table 更新
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        web_id: this.select_web,
        target_web: this.target_web,
        project_id: this.project_id,
        kw: this.kwInput,
        tag: this.tagInput,
        stype: this.stype,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        crawled_count: '1',
        order_desc: this.order_desc
      }))
        .then(response => {
          this.data = response.data.data
          this.listLoading = false
          setToken(souceSiteKey, this.select_web)
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleSetDirectUploadCategories(v) {
      this.temp.id_of_default_category = v.default_catalog
      this.temp.id_of_associated_categories = v.target_catalogs
      console.log(v)
      this.direct_upload_state = 'success'
      this.handleAddNewTargetweb()
      // if (this.temp.id_of_associated_categories.indexOf(2) === -1) {
      //   this.direct_upload_state = 'warning'
      // } else {
      //   this.direct_upload_state = 'success'
      //   this.handleAddNewTargetweb()
      // }
    },
    handleUploadSuccess(arg) {
      this.data.forEach(item => {
        if (item.id === arg.crawl_keyword) {
          item.is_upload = true
          this.temp.keyword = item.keyword
          this.temp.id = item.id
          this.temp.tag = item.tag
          this.temp.web_id = item.web_id
          this.temp.mini_price = item.mini_price
          this.temp.max_price = item.max_price
          this.temp.sort_type = item.sort_type
          this.temp.target_web_id = arg.target_web_id
          this.temp.is_upload = item.is_upload
          this.temp.id_of_associated_categories = arg.associated_categories
          this.temp.id_of_default_category = arg.default_category
          this.temp.ship_from = item.ship_from
          this.temp.max_delivery_days = item.max_delivery_days
          this.temp.max_commit_days = item.max_commit_days
          this.temp.crawl_shipping_price = item.crawl_shipping_price
          this.handleAddNew()
        }
      })
    },
    handleUpload(row) {
      this.keyword_id = row.id
      this.keyword = row.keyword
      this.keyword_target_web_id = row.target_web__id
      this.uploadVisible = true
    },
    handleUploadTask(row) {
      if (row.target_webs.length > 0) {
        this.domain = row.target_webs[0].domain
      } else if (row.target_web__domain) {
        this.domain = row.target_web__domain
      } else {
        this.domain = ''
      }
      this.directlyUploadTaskVisible = true
    },
    handleShowTasks(row) {
      this.keyword = row.keyword
      this.keyword_id = row.id
      this.taskVisible = true
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    handleCrawlKeywordPage(row) {
      row.send_count += 1
      crawl_keyword_page(row.id).then((respnse) => {
        this.notify(respnse.data.msg)
      }).catch((error) => {
        console.log(error)
      })
    },
    handleDelete(row) {
      this.$confirm(`确认要删除关键词  ${row.keyword}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(row.id).then((response) => {
          this.innerDialogVisible = false
          this.getList()
          this.notify('删除成功')
        })
      }).catch(() => {
      })
    },
    handleModify(row) {
      this.temp.keyword = row.keyword
      this.temp.id = row.id
      this.temp.tag = row.tag
      this.temp.web_id = row.web_id
      this.temp.mini_price = row.mini_price
      this.temp.max_price = row.max_price
      this.temp.sort_type = row.sort_type
      this.temp.is_auto_upload = row.is_auto_upload
      this.temp.target_web_id = row.target_web__id
      this.temp.update_frequency = row.update_frequency
      this.temp.target_webs = row.target_webs
      this.temp.crawl_shipping_price = row.crawl_shipping_price
      this.temp.ship_from = row.ship_from
      this.temp.max_commit_days = row.max_commit_days
      this.temp.max_delivery_days = row.max_delivery_days
      this.temp.project_id = row.project_id
      this.temp.id_of_associated_categories = '' // Array.isArray(row.id_of_associated_categories) ? row.id_of_associated_categories : []
      this.temp.id_of_default_category = [] // row.id_of_default_category
      if (this.temp.id_of_associated_categories.length > 0) {
        if (this.temp.id_of_associated_categories.indexOf(2) === -1) {
          this.direct_upload_state = 'warning'
        } else {
          this.direct_upload_state = 'success'
        }
      } else {
        this.direct_upload_state = 'default'
      }

      this.innerDialogVisible = true
    },
    handleAddNew() {
      if (this.temp.crawl_shipping_price && this.temp.ship_from === '') {
        this.notify('请指定产品从哪个国家发出，国家代码大写,例如美国：US')
        return
      }
      if (this.temp.id !== '') {
        // if (this.temp.is_auto_upload) {
        //   // 如果自动上传,默认修改为已经上传
        //   this.temp.is_upload = true
        //   if (this.temp.id_of_default_category.length === 0) {
        //     this.notify('默认目录不能为空')
        //     return
        //   }
        //   if (this.temp.id_of_associated_categories.length === 0) {
        //     this.notify('关联目录不能为空')
        //     return
        //   }
        // }
        this.modifyloading = true
        Put(this.temp.id, this.temp).then((response) => {
          this.data.forEach(item => {
            if (item.id === this.temp.id) {
              item.keyword = this.temp.keyword
              item.tag = this.temp.tag
              item.is_upload = this.temp.is_upload
              item.mini_price = this.temp.mini_price
              item.min_orders = this.temp.min_orders
              item.min_reviews = this.temp.min_reviews
              item.min_star = this.temp.min_star
              item.max_pages = this.temp.max_pages
              item.max_price = this.temp.max_price
              item.sort_type = this.temp.sort_type
              item.is_auto_upload = this.temp.is_auto_upload
              item.ship_from = this.temp.ship_from
              item.max_delivery_days = this.temp.max_delivery_days
              item.max_commit_days = this.temp.max_commit_days
              item.crawl_shipping_price = this.temp.crawl_shipping_price
              item.id_of_default_category = this.temp.id_of_default_category
              item.id_of_associated_categories = this.temp.id_of_associated_categories
              item.target_web__id = this.temp.target_web_id
              this.targetWebs.forEach(i => {
                if (i.id === this.temp.target_web_id) {
                  item.target_web__domain = i.domain
                }
              })
            }
          })
          this.notify('修改成功')
          this.innerDialogVisible = false
          this.temp.id = ''
          this.temp.keyword = ''
          this.modifyloading = false
        }).catch(() => {
          this.modifyloading = false
        })
      } else {
        this.modifyloading = true
        Post(this.temp).then((response) => {
          setToken(SEARCHKEY_WEB_ID, this.temp.web_id)
          this.temp.id = ''
          this.temp.keyword = ''
          this.modifyloading = false
          this.innerDialogVisible = false

          this.getList()
        }).catch(() => {
          this.modifyloading = false
        })
      }
    },
    handleShowDialog() {
      this.temp.keyword = ''
      this.temp.id = ''
      this.innerDialogVisible = true
    },
    handleProducts(row) {
      this.$router.push({ name: 'crawlviewproduct', query: { sk: row.keyword, skid: row.id, w: row.web_id, t: 'keyword' }})
      console.log(row)
    },
    handleSearch() {
      this.page = 1
      this.temp.web_id = this.select_web
      this.getList()
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    ChangeStatus(row) {
      Put(row.id, row).then((response) => {
        this.$notify({
          title: '修改成功',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

.app-container >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.app-container >>> .text {
  font-size: 14px;
}

.app-container >>> .pointer {
  cursor: pointer;
  color: #409EFF;
}

.app-container >>> a:visited {
  color: purple;
}

.app-container >>> a:link {
  color: #409EFF;
}

.app-container >>> a:active {
  color: red;
}

.app-container >>> a:hover {
  color: red;
  text-decoration: underline;
}
</style>
